<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>【动画进阶】类 ChatGpt 多行文本打字效果</title>
    <link rel="stylesheet" href="../../styles/scss/animation.css" />
  </head>
  <body>
    <div class="six-g-container">
      <!-- <div class="test1">
        <p>1234567890ABC</p>
        <p>中文或其他字符ォヶ</p>
      </div>
      -->
      <div style="display: flex; width: 100%; gap: 60px">
        <div class="test21">
          <p></p>
          <p></p>
          <p></p>
          <p></p>
        </div>
        <div class="test22">
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
        </div>
      </div>
      <div class="test3">
        <h1>Pure CSS Typing animation.</h1>

        <div style="margin-bottom: 20px">
          <p id="block-content" style="margin-bottom: 20px">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis dicta
            incidunt ut illo, ratione aut reprehenderit facilis mollitia saepe
            ducimus libero hic reiciendis deserunt optio veniam ullam. Beatae,
            non quae.
          </p>
          <a id="inline-content">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis dicta
            incidunt ut illo, ratione aut reprehenderit facilis mollitia saepe
            ducimus libero hic reiciendis deserunt optio veniam ullam. Beatae,
            non quae.
          </a>
        </div>
        <div id="content"></div>
        <div></div>
        <div id="content2"></div>
      </div>
      <div class="test4">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis
          quaerat ipsam fugit fugiat cupiditate asperiores neque libero natus
          atque, suscipit error esse inventore numquam molestiae quas laborum
          eius debitis cum? Lorem ipsum dolor sit amet consectetur adipisicing
          elit. Reiciendis quaerat ipsam fugit fugiat cupiditate asperiores
          neque libero natus atque, suscipit error esse inventore numquam
          molestiae quas laborum eius debitis cum?
        </p>
      </div>
    </div>
    <script>
      const text =
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis dicta incidunt ut illo, ratione aut reprehenderit facilis mollitia saepe ducimus libero hic reiciendis deserunt optio veniam ullam. Beatae, non quae.";
      const contentElement = document.getElementById("content");
      const contentElement2 = document.getElementById("content2");
      let index = 0;

      function addNextCharacter() {
        if (index < text.length) {
          contentElement.textContent += text[index];
          contentElement2.textContent += text[index];
          index++;
          setTimeout(addNextCharacter, Math.random() * 150 + 30);
        } else {
        }
      }

      addNextCharacter();
    </script>
  </body>
</html>
